<template>
  <view class="content">
    <Head title="收藏" @back="back" icon="icon-arrow-left-bold" />
    <div class="list">
      <div @click="show" v-for="(item, ind) in list" :key="ind">
        <p>
          <span>{{ item }}</span
          ><span>></span>
        </p>
      </div>
    </div>
    <div v-show="flag">
      <div class="listitem" v-for="item in data" :key="item.BaseDetail.sqid">
        <div>
          <img :src="item.imgurl" />
        </div>
        <div>
          <p>{{ item.housetitle }}</p>
          <p>
            {{ item.bedroom }}室{{ item.livingroom }}厅{{ item.toilet }}卫 |
            {{ item.buildarea }}m² | {{ item.heading }} |
            {{ item.communityname }}
          </p>
          <p>
            <span v-for="(ite, ind) in item.tagwall" :key="ind">{{ ite }}</span>
          </p>
          <p>
            <b>{{ item.price }}万</b><span>{{ item.unitprice }}元/m²</span>
          </p>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
import Head from "@/components/head/index";
import { getColl } from "@/service/index";

export default {
  components: { Head },
  data() {
    return {
      list: ["石景山"],
      flag: false,
      data: []
    };
  },
  async onLoad() {
    let res = await getColl({ broom: 4 });
    if (res.status == 200) {
      this.data = res.data.list;
    }
  },
  methods: {
    back() {
      wx.navigateBack({
        delta: 1
      });
    },
    show() {
      this.flag = !this.flag;
    }
  }
};
</script>

<style scoped lang="scss">
.list {
  background-color: #eee;
  height: 100rpx;
  div {
    background-color: #fff;
    p {
      height: 100rpx;
      width: 80%;
      margin: 0 auto;
      line-height: 100rpx;
      margin-bottom: 20rpx;
      display: flex;
      justify-content: space-between;
    }
  }
}
.listitem {
  display: flex;
  width: 95%;
  margin: 30rpx auto;
  justify-content: space-between;
  > div > img {
    width: 300rpx;
    height: 300rpx;
    border-radius: 15rpx;
  }
  > div:nth-child(2) {
    width: 55%;
    > p {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10rpx;
      b {
        color: red;
        margin-right: 20rpx;
      }
    }
    > p:nth-child(2) {
      font-size: 26rpx;
    }
    > p:nth-child(3) {
      font-size: 26rpx;
      span {
        background-color: #ddd;
        border-radius: 10rpx;
        padding: 5rpx;
        margin: 5rpx;
      }
    }
  }
}
</style>
